[react]React 路由传参的方式总结

1. 直接在to属性的值后面加?跟上参数  


通过this.props.location.search 可以得到?及之后的字符串，在自己进行分析



<p><Link to="/productDetail?id=5">商品id:{item.goods_id}</Link></p>
接收: this.props.location.search   //输出为 ?id=5 属性string类型


2. 使用query或params进行传值


<p><Link to=pw_pathname:"/productDetail",query:{id:item.goods_id}>商品id:{item.goods_id}</Link></p>
接收：this.props.location.query.id


<p><Link to=pw_pathname:"/productDetail",params:{id:item.goods_id}>商品id:{item.goods_id}</Link></p>
接收:this.props.location.params.id



<p><Link to=pw_pathname:"/productDetail",state:{id:item.goods_id}>商品id:{item.goods_id}</Link></p>
接收: this.props.location.state.id


同query差不多，只是属性不一样，而且state传的参数是加密的


3. 路由传参


路由的定义中，要定义参数
<Route path="/productDetail/:id" component={ProductDetail}/>


参数以 / 的形式加在路由后面
<p><Link to={"/productDetail/"+item.goods_id}>商品id:{item.goods_id}</Link></p>


接收：this.props.match.params.id


注：设置路由参数，当没有传参数时，不会显示组件，解决方法，在对应参数后面写?,


代码如下：


<Route path="/productDetail/:id?" component={ProductDetail}/>